<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>博客</title>
    <!--bootstrap css文件-->
    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <!--jquery js文件-->
    <script src="js/jquery.min.js"></script>
    <!--bootstrap js文件-->
    <script src="bootstrap-4.2.1-dist/js/bootstrap.bundle.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
    <!--自定义css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <!--灯箱插件-->
    <link rel="stylesheet" href="swipebox-master/src/css/swipebox.css">

</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img src="images/logo.jpg" width="45"></a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="class.html">分类</a></li>
                <li class="nav-item"><a class="nav-link" href="blog.html">博客</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">联系</a></li>
            </ul>

            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索">
                <button type="submit" class="btn btn-outline-success my-2 my-sm-0">搜索</button>
            </form>

        </div>

    </nav>

    <div class="row border bg-white m-0 px-3 pt-4 pb-5 blog-border">
        <div class="col-12 col-lg-8">
            <h4><i class="fa fa-volume-control-phone mr-2"></i><span>你的联系方式</span></h4><hr/>
            <form>
                <div class="form-group">
                    <input type="text" class="form-control w-75" placeholder="姓名" data-toggle="popover" data-placement="right" data-content="请输入你的姓名">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control w-75" placeholder="邮箱" data-toggle="popover" data-placement="right" data-content="请输入你的邮箱">
                </div>
                <div class="form-group">
                    <input type="tel" class="form-control w-75" placeholder="手机号码" data-toggle="popover" data-placement="right" data-content="请输入你的手机号">
                </div>
                <div class="form-group">
                    <textarea type="text" class="form-control w-75" rows="5" placeholder="留言板" data-toggle="popover" data-placement="right" data-content="留言板"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
        <div class="col-12 col-lg-4">
            <h4 class="shadow mb-4"><i class="fa fa-phone-square mx-2"></i><span>联系我们</span></h4>
            <div class="alert alert-primary">
                <i class="fa fa-qq mr-3"></i>
                <span>2145201314</span>
            </div>
            <div class="alert alert-info">
                <i class="fa fa-weixin mr-3"></i>
                <span>欢欢</span>
            </div>
            <div class="alert alert-success">
                <i class="fa fa-mobile mr-3"></i>
                <span>13312345678</span>
            </div>
            <div class="alert alert-danger">
                <i class="fa fa-map-marker mr-3"></i>
                <span>2145201314</span>
            </div>
        </div>
    </div>

</div>

</body>
<script>
    $(function (){
        $('[data-toggle="popover"]').popover()
    })
</script>
</html>